import  './../style/styleComponent.less';
import styled, {css} from 'styled-components';
import GlobalStyle from './../style/createGlobalStyle.js';




console.dir(styled)

const flexBox = css`
    display: flex;
    justify-content: space-between;
    align-items: center;`

const ChildStyle = styled.span`
    color: red;
    font-size: 30px;
    font-weight: bold;
    .box {
        background:gold;
        .test {
            color:blue;
        }
        .list-view {
            ${flexBox}
        }
    }
`;

console.log(ChildStyle);


const Child = function() {
    return (
        <ChildStyle>
            <div>
                <h1>Child</h1>
                <div className='box'>
                    <div className="test">测试测试~~~</div>
                    <div className='list-view'>
                    <span>111</span>
                    <span>更多</span>
                </div>
                </div>

                <p className='fl'>左浮动</p>
                <p className='fr'>右浮动</p>
            </div>
        </ChildStyle>
    )
}


const styleComponent = function() {
    const divStyle = {
        color: 'red',
        fontSize: '30px',
        fontWeight: 'bold'
    }
    return (
        <div>
            <GlobalStyle />
            <h1 style={divStyle}>styleComponent</h1>

            <div className="box">
                box
                <p className="list">list

                    <span className='value'>哈哈哈~~~~</span>
                </p>
            </div>

            <hr />
            <Child />
        </div>
    )
}



export default styleComponent;